<template>
  <el-dialog
    title="通知详情"
    v-model="visible"
    width="600px"
    append-to-body
    @close="handleClose"
  >
    <el-descriptions
      v-if="detailData"
      :column="1"
      border
    >
      <el-descriptions-item label="通知标题">
        {{ detailData.title }}
      </el-descriptions-item>

      <el-descriptions-item label="类型">
        {{ getNotifyTypeText(detailData.templateId) }}
      </el-descriptions-item>

      <el-descriptions-item label="发送时间">
        {{ parseTime(detailData.sendTime, "{y}-{m}-{d}") }}
      </el-descriptions-item>

      <el-descriptions-item label="推送详情">
        <div class="content-text">{{ detailData.content || detailData.msgContent || '-' }}</div>
      </el-descriptions-item>

      <el-descriptions-item label="附件">
        <div v-if="detailData.attachmentFileVo && detailData.attachmentFileVo.length > 0" class="attachment-list">
          <div
            v-for="(file, index) in detailData.attachmentFileVo"
            :key="index"
            class="attachment-item"
          >
            <el-icon class="attachment-icon"><Document /></el-icon>
            <span class="attachment-name">{{ file.originalName || file.fileName }}</span>
            <el-button
              link
              type="primary"
              size="small"
              @click="handleDownload(file)"
            >
              下载
            </el-button>
          </div>
        </div>
        <span v-else>-</span>
      </el-descriptions-item>

      <el-descriptions-item label="接收人">
        <div class="recipient-info" v-if="detailData.userName">
          <div class="recipient-details">
            <div class="recipient-name">
              {{ detailData.userName }}
              <span class="recipient-type">({{ getUserTypeText(detailData.userType) }})</span>
            </div>
            <div class="recipient-phone" v-if="detailData.userPhone">
              {{ maskPhone(detailData.userPhone) }}
            </div>
          </div>
        </div>
        <span v-else>-</span>
      </el-descriptions-item>
    </el-descriptions>

    <div v-else class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>

    <template #footer>
      <div class="dialog-footer">
        <!-- <el-button @click="handleClose">取消</el-button> -->
        <el-button type="primary" @click="handleClose">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="NotifyDetailDialog">
import { Document } from '@element-plus/icons-vue'
import { getNotify } from '@/api/fang/notify'
import { parseTime } from '@/utils/ruoyi'
import {
  NOTIFY_TEMPLATE_TYPE_TEXT,
  USER_TYPE_TEXT
} from '@/utils/enums'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  notifyId: {
    type: [Number, String],
    default: null
  }
})

const emit = defineEmits(['update:modelValue'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const detailData = ref(null)
const loading = ref(false)

const { proxy } = getCurrentInstance()

// 获取通知类型文本
function getNotifyTypeText(templateId) {
  return NOTIFY_TEMPLATE_TYPE_TEXT[templateId] || '未知类型'
}

// 获取用户类型文本
function getUserTypeText(userType) {
  return USER_TYPE_TEXT[userType] || '未知'
}

// 手机号脱敏
function maskPhone(phone) {
  if (!phone || phone.length !== 11) return phone
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

// 下载附件
function handleDownload(file) {
  const fileUrl = file.filePath || file.url
  if (fileUrl) {
    const link = document.createElement('a')
    link.href = fileUrl
    link.download = file.originalName || file.fileName || 'download'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  } else {
    proxy.$modal.msgError('文件链接不存在')
  }
}

// 获取详情数据
function fetchDetail() {
  if (!props.notifyId) {
    detailData.value = null
    return
  }
  
  loading.value = true
  getNotify(props.notifyId)
    .then(response => {
      if (response.code === 200) {
        detailData.value = response.data || response
      } else {
        proxy.$modal.msgError(response.msg || '获取详情失败')
        detailData.value = null
      }
    })
    .catch(error => {
      console.error('获取通知详情失败:', error)
      proxy.$modal.msgError('获取详情失败')
      detailData.value = null
    })
    .finally(() => {
      loading.value = false
    })
}

// 关闭弹窗
function handleClose() {
  visible.value = false
  detailData.value = null
}

// 监听弹窗打开和 notifyId 变化
watch([visible, () => props.notifyId], ([isVisible, id]) => {
  if (isVisible && id) {
    fetchDetail()
  }
}, { immediate: true })
</script>

<style scoped>
.content-text {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}

.recipient-info {
  display: block;
}

.recipient-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.recipient-type {
  color: #909399;
  font-weight: normal;
  margin-left: 4px;
}

.recipient-phone {
  font-size: 12px;
  color: #909399;
}

.loading-container {
  padding: 20px;
}

:deep(.el-descriptions__label) {
  width: 100px;
  font-weight: 500;
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.attachment-icon {
  font-size: 18px;
  color: #409eff;
  flex-shrink: 0;
}

.attachment-name {
  flex: 1;
  font-size: 14px;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

